<template>
	<view class="page">
		<view class="bar_info" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class="title_bar">
				<view class="title_bar_left" @tap.stop="handleJump" data-type="BACK">
					<image class="title_bar_left_icon" :src='STATIC_URL+"5.png"'></image>
				</view>
				<view class="title_bar_center">
					<text >上传收据单</text>
				</view>
				<view class="title_bar_right"></view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<!-- <view class="img_info" v-if="!receipt_image" @tap.stop="uploadImg">
			<image class="img_item" :src='STATIC_URL+"42.png"' mode=""></image>
		</view>
		<view class="img_info" style="border: 0;" v-else @tap.stop="uploadImg">
			<image :src='receipt_image' mode="aspectFill"></image>
		</view> -->
		<view class="img_list">
			<view class="img_item" v-for="(v, k) in imgList" :key="k">
				<image @tap.stop="previewImage(k)" :src='v' mode="aspectFill"></image>
				<u-icon @click="delImg(k)" class="del_icon" name="close-circle-fill" size="32" color="red"></u-icon>
			</view>
			<view class="img_item" @tap.stop="uploadImg" v-if="imgList.length < 30">
				<image :src='STATIC_URL+"42.png"' mode=""></image>
			</view>
		</view>
		<view class="save_btn" @tap.stop="orderTakeover">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "",
				show: false,
				out_show: false,
				userInfo: {},
				id: "",  // 订单id
				receipt_image: "",  // 收货凭据
				is_submit: false,
				imgList: [],
				maxImg: 30,
				type: 1,
			}
		},
		components: {
			
		},
		onLoad(options) {
			let { id, type } = options;
			if (id !== undefined) this.id = id;
			if (type !== undefined) this.type = type;
			if (this.type == 2) {
				if (global.receipt_image) {
					let receipt_image = global.receipt_image.split(',');
					this.imgList = receipt_image;
					this.maxImg = 30 - this.imgList.length;
				}
			}
			
		},
		onUnload() {
		},
		methods: {
			orderTakeover() {
				if (this.is_submit) return;
				if (this.imgList.length == 0) {
					this.$message.info('请上传收货凭据');
					return;
				}
				// console.log(this.imgList);
				this.is_submit = true;
				this.$api.post(global.apiUrls.gylTake, {
					order_id: this.id,
					receipt_image: this.imgList.join(',')
				}).then(res => {
					this.$message.info(res.data.message);
					if (res.data.code == 200) {
						setTimeout(() => {
							this.is_submit = false;
							uni.navigateBack();
						}, 800)
					} else {
						this.is_submit = false;
					}
				}).catch(err => {
					this.is_submit = false;
				})
			},
			// 图片上传
			uploadImg() {
				let _this = this;
				uni.chooseImage({
					count: _this.maxImg,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: '上传中'
						})
						for(let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: global.API_BASE_URL + global.apiUrls.gylUploadImg, //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'image',
								formData: {},
								header: {
									'Authorization': 'Bearer ' + global.token
								},
								success: (uploadFileRes) => {
									uni.hideLoading();
									let result = JSON.parse(uploadFileRes.data);
									console.log(result);
									if (result.code == 200) {
										// _this.user.photo = result.data.photo;
										_this.imgList.push(global.API_BASE_URL + result.data.url);
										_this.maxImg = 30 - _this.imgList.length;
									} else {
										_this.$message.info(result.message);
									}
								},
								fail: (err) => {
									console.log(err);
									uni.hideLoading();
									_this.$message.info('图片上传失败，请重试');
								}
							});
						}
						
					}
				});
			},
			// 预览图片
			previewImage(index) {
				let _this = this;
				uni.previewImage({
					current: index,
					urls: _this.imgList
				})
			},
			delImg(index) {
				this.imgList.splice(index, 1);
				this.maxImg = 30 - this.imgList.length;
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;
		.myInformation_picker3_0_c2 {
			color: #0278FC;
		}
		
		.myInformation_picker3_0 {
			border-bottom: 1px solid #eee;
			background: #fff;
			padding: 0rpx 32rpx 0rpx 32rpx;
			line-height: 88rpx;
			border-radius: 25rpx 25rpx 0rpx 0rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.bar_info {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			// border-bottom: 1px solid #eee;
			// background: #fff;
			z-index: 10;
			position: fixed;
			top: 0rpx;
		
			.title_bar {
				padding: 0 32rpx;
				display: flex;
				justify-content: space-between;
		
				.title_bar_left {
					width: 50rpx;
					display: flex;
					align-items: center;
					.title_bar_left_icon {
						width: 18rpx;
						height: 32rpx;
					}
				}
		
				.title_bar_center {
					line-height: 88rpx;
					font-size: 36rpx;
					font-weight: 400;
				}
		
				.title_bar_right {
					width: 50rpx;
				}
			}
		}
		.information_info {
			padding: 30rpx;
			.information {
				background: #fff;
				border-radius: 20rpx;
				padding: 0 30rpx;
				.information_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx solid #eee;
					padding: 28rpx 0;
					.item_left {
						font-size: 30rpx;
						// width: 70rpx;
					}
					.item_right {
						width: 88rpx;
						height: 88rpx;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.item_right_name {
						flex: 1;
						display: flex;
						align-items: center;
						input {
							text-align: right;
							width: 100%;
						}
						.item_right_name_icon {
							margin-left: 8rpx;
						}
					}
					.item_right_sex {
						display: flex;
						.sex_item {
							display: flex;
							align-items: center;
							margin-left: 90rpx;
							image {
								width: 26rpx;
								height: 26rpx;
								margin-right: 10rpx;
							}
						}
					}
				}
				.no_border {
					border-bottom: 1rpx solid transparent;
				}
			}
		}
		.save_btn {
			width: 700rpx;
			height: 80rpx;
			background: #41AF36;
			border-radius: 50rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
			position: fixed;
			bottom: 32rpx;
			left: 25rpx;
		}
		.img_info {
			margin: 36rpx 28rpx;
			height: 260rpx;
			border-radius: 8rpx;
			position: relative;
			border: 1px dashed #41AF36;
			.img_item {
				width: 120rpx;
				height: 120rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 10;
			}
			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}
	}
	
	.img_list {
		overflow: hidden;
		margin: 32rpx 42rpx;
		.img_item {
			float: left;
			width: 148rpx;
			height: 148rpx;
			margin: 0 16rpx 16rpx 0;
			position: relative;
			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
			.del_icon {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 10;
			}
		}
	}
</style>